import React, { useState } from 'react'
import { NavBar, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { PlusOutlined } from '@ant-design/icons';

export default function YiJian() {
    const navigate = useNavigate()
    const [images, setImages] = useState([]);
    const [content, setcontent] = useState('')
    const back = () => {
        navigate('/help')
    }
    const handleImageChange = (event) => {
        const files = Array.from(event.target.files);
        const imageUrls = files.map(file => URL.createObjectURL(file));
        setImages(prevImages => [...prevImages, ...imageUrls]);
    }

    const handlerSubmit = () => {
        Toast.show({
            icon: 'success',
            content: '提交成功'
        })
        navigate('/help')
    }

    return (
        <div style={{ width: '100%', height: '100%', background: '#eee' }}>
            <NavBar style={{ width: '100%', background: 'white' }} onBack={back}>
                <h3>意见反馈</h3>
            </NavBar>
            <hr />
            <div style={{ width: '90%', height: '600px', background: 'white', margin: 'auto', marginTop: '30px', borderRadius: '10px' }}>
                <h3 style={{ marginLeft: '20px', paddingTop: '10px' }}>问题意见描述</h3>
                <textarea onChange={(e) => { setcontent(e.target.value) }} value={content} placeholder='请描述您在使用中遇到的问题和优化建议，以便我们更好的提供服务' style={{ marginLeft: '20px', marginTop: '10px', width: '340px', height: '550px', border: 'none', outline: 'none' }}></textarea>
                <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', position: 'absolute', top: '580px', marginLeft: '20px' }}>
                    {images.map((src, index) => (
                        <img key={index} src={src} alt="upload preview" style={{ width: '80px', height: '80px', margin: '5px', borderRadius: '5px', objectFit: 'cover' }} />
                    ))}
                    <label style={{ width: '80px', height: '80px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f5f5f5', borderRadius: '5px', cursor: 'pointer' }}>
                        <PlusOutlined style={{ fontSize: '24px', color: '#bbb' }} />
                        <input type="file" accept="image/*" multiple onChange={handleImageChange} style={{ display: 'none' }} />
                    </label>
                </div>
                <p style={{ position: 'absolute', right: '35px', top: '640px', fontSize: '17px', color: 'gray' }}>{content.length}/{200 - content.length}</p>
            </div>
            <div style={{ width: '90%', height: '255px', background: '#eee' }}>
                <button onClick={() => { handlerSubmit() }} style={{ width: '300px', height: '40px', border: '0px', background: 'linear-gradient(to right, rgb(237, 195, 145),rgb(244, 171, 87))', borderRadius: '20px', color: 'white', fontSize: '17px', marginLeft: '70px', marginTop: '30px' }}>提交</button>
            </div>
        </div>
    )
}